<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function reg() {
            var $lid = lid.value;
            var $family_id = family_id.value;
            var $title = title.value;
            var $price = price.value;
            var $promise = promise.value;
            var $spec = spec.value;
            var $category = category.value;
            var $details = details.value;
            var $shelf_time = shelf_time.value;
            var $sold_count = sold_count.value;
            var $is_onsale = -1;
            if (sale.checked) {
                $is_onsale = 1
            } else if (nsale.checked) {
                $is_onsale = 0
            } else {
                $is_onsale = -1
            }
            var $size = size.value;
            var $Fabric = Fabric.value;
            var $season = season.value;
            var $vtype = vtype.value;
            //非空验证
            if (!$lid) { alert("编号不能为空"); return; }
            if (!$family_id) { alert("名称不能为空"); return; }
            if (!$title) { alert("主标题不能为空"); return; }
            if (!$price) { alert("价格不能为空"); return; }
            if (!$promise) { alert("服务承诺不能为空"); return; }
            if (!$spec) { alert("规格/颜色不能为空"); return; }
            if (!$category) { alert("所属分类不能为空"); return; }
            if (!$details) { alert("产品详细说明不能为空"); return; }
            if (!$shelf_time) { alert("上架时间不能为空"); return; }
            if (!$sold_count) { alert("已售出的数量不能为空"); return; }

            if (!$size) { alert("尺寸不能为空"); return; }
            if (!$Fabric) { alert("面料不能为空"); return; }
            if (!$season) { alert("适用季节不能为空"); return; }
            if (!$vtype) { alert("版型不能为空"); return; }
            //1.创建xhr异步对象
            var xhr = new XMLHttpRequest();
            //2.创建请求,打开连接
            xhr.open("post", `/laptop/v1/laptop_reg`, true)
            //3.发送请求
            //3.1创建请求主体
            var formdata = `lid=${$lid}&family_id=${$family_id}&title=${$title}&price=${$price}&promise=${$promise}&spec=${$spec}&category=${$category}&details=${$details}&shelf_time=${$shelf_time}&sold_count=${$sold_count}&is_onsale=${$is_onsale}&size=${$size}&Fabric=${$Fabric}&season=${$season}&vtype=${$vtype}`
            //3.2设置请求头信息
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(formdata)
            //4接收响应
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var r = xhr.responseText;
                    if (r == 1) {
                        alert("添加成功")
                    } else {
                        alert("添加失败")
                    }
                }
            }
        }
    </script>
</head>

<body>
    <input type="text" id="lid">编号<br>
    <input type="text" id="family_id">所属家族编号<br>
    <input type="text" id="title">主标题<br>
    <input type="text" id="price">价格<br>
    <input type="text" id="promise">服务承诺<br>
    <input type="text" id="spec">规格/颜色<br>
    <input type="text" id="category">所属分类<br>
    <input type="text" id="details">产品详细说明<br>
    <input type="text" id="shelf_time">上架时间<br>
    <input type="text" id="sold_count">已售出的数量<br>
    <input type="radio" id="sale" name="is_onsale" checked>
    <label for="sale">促销中</label>
    <input type="radio" id="nsale" name="is_onsale">
    <label for="nsale">不促销</label><br>
    <input type="text" id="size">尺寸<br>
    <input type="text" id="Fabric">面料<br>
    <input type="text" id="season">适用季节<br>
    <input type="text" id="vtype">版型<br>
    <button onclick="reg()">注册</button>
</body>

</html>